<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRoute } from 'vue-router'
  
    const route = useRoute();
    const workId = route.params.id as string;  // 获取作品 ID
    
    // 模拟作品数据，根据 workId 获取对应的作品
    const works = [
      {
        id: '兰亭序',
        name: '兰亭序',
        author: '王羲之',  // 作者字段
        image: '../src/assets/worklist_test.png',
        characters: [
          { char: '兰' },
          { char: '亭' },
          { char: '序' }
        ],
        comments: [
          {
            user: '用户A',
            avatar: '../src/assets/qq.png',  // 评论者头像
            text: '这幅作品展现了王羲之的书法精髓。',
            date: '2024-12-01 10:30', // 评论时间
            likes: 10,
            dislikes: 2,
          },
          {
            user: '用户B',
            avatar: '../src/assets/qq.png',  // 评论者头像
            text: '写得真好，兰亭序真是天下第一行书！',
            date: '2024-12-01 11:15', // 评论时间
            likes: 8,
            dislikes: 1,
          }
        ]
      },
      {
        id: '多宝塔碑',
        name: '多宝塔碑',
        author: '颜真卿',  // 作者字段
        image: '../src/assets/duobao1.jpg',
        characters: [
          { char: '多' },
          { char: '宝' },
          { char: '塔' },
          { char: '碑' }
        ],
        comments: [
          {
            user: '用户A',
            avatar: '../src/assets/qq.png',  // 评论者头像
            text: '颜真卿的楷书堪称楷模！',
            date: '2024-12-02 09:00', // 评论时间
            likes: 5,
            dislikes: 0,
          },
          {
            user: '用户B',
            avatar: '../src/assets/qq.png',  // 评论者头像
            text: '这幅碑文非常精美，笔力刚劲有力。',
            date: '2024-12-02 09:30', // 评论时间
            likes: 7,
            dislikes: 0,
          }
        ]
      }
    ];
  
    // 当前作品对象
    const selectedWork = ref(null);
  
    // 获取作品数据
    onMounted(() => {
      selectedWork.value = works.find(work => work.id === workId);
    });
  
    // 评论输入
    const newComment = ref('');
    const addComment = () => {
      if (newComment.value) {
        selectedWork.value?.comments.push({
          user: '游客',
          avatar: '../src/assets/qq.png',  // 默认头像
          text: newComment.value,
          date: new Date().toLocaleString(), // 当前时间
          likes: 0,
          dislikes: 0
        });
        newComment.value = '';  // 清空评论框
      }
    };
  
    // 点赞和踩
    const toggleLike = (comment: any) => {
      comment.likes += 1;
    };
  
    const toggleDislike = (comment: any) => {
      comment.dislikes += 1;
    };
  </script>
  
  <template>
    
    <div v-if="selectedWork">
      <!-- 作品标题和作者 -->
      <div v-if="selectedWork && selectedWork.name">
          <section class="work-header">
            <h2>{{ selectedWork.name }}</h2> <!-- 作品名 -->
            <p>{{ selectedWork.author }}</p> <!-- 作者名 -->
          </section>
      </div>
  
      <!-- 原作图片区域 -->
      <section>
        <img :src="selectedWork.image" alt="作品图片" class="work-image" />
      </section>
  
      <!-- 识别文本内容区域 -->
      <section>
        <h3>如是识别</h3>
        <div>
          <textarea readonly rows="5" cols="50"> 永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。

            是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。
            
            夫人之相与，俯仰一世。或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，不知老之将至；及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀，况修短随化，终期于尽！古人云：“死生亦大矣。”岂不痛哉！
            
            每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。固知一死生为虚诞，齐彭殇为妄作。后之视今，亦犹今之视昔，悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。后之览者，亦将有感于斯文。          </textarea>
        </div>
      </section>
  
      <!-- 评论区内容 -->
      <section class="comments-section">
        <div>
          <div v-for="(comment, index) in selectedWork.comments" :key="index" class="comment-item">
            <div class="comment-header">
              <img :src="comment.avatar" alt="Avatar" class="avatar" />
              <div class="comment-info">
                <strong>{{ comment.user }}</strong>
                <span class="comment-date">{{ comment.date }}</span>
              </div>
            </div>
            <p>{{ comment.text }}</p>
            <div class="comment-actions">
              <button @click="toggleLike(comment)">👍 {{ comment.likes }}</button>
              <button @click="toggleDislike(comment)">👎 {{ comment.dislikes }}</button>
            </div>
          </div>
        </div>
        <div class="comment-input">
          <input v-model="newComment" type="text" placeholder="添加评论..." />
          <button @click="addComment">提交评论</button>
        </div>
      </section>
    </div>
  
    <div v-else>
      <p>未找到对应的作品信息。</p>
    </div>
  </template>
  
  <style scoped>
  /* 作品标题样式 */

  .work-header {
    text-align: center;
    margin-top: 40px;
  }
  
  .work-header h2 {
    font-size: 35px;
    margin-bottom: 10px;
  }
  
  .work-header p {
    font-size: 18px;
    color: #555;
  }
  
  /* 原作图片样式 */
  .work-image {
    max-width: 100%;
    height: auto;
  }

  
  /* 评论区样式 */
  .comments-section {
    width:600px;
    margin-top: 30px;
    padding: 20px;
    background-color: #f7f7f7;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .comments-section h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 20px;
  }
  
  .comment-item {
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .comment-header {
    display: flex;
    align-items: center;
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .comment-info {
    display: flex;
    flex-direction: column;
  }
  
  .comment-info strong {
    font-weight: bold;
    color: #007bff;
  }
  
  .comment-date {
    font-size: 12px;
    color: #aaa;
  }
  
  .comment-item p {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
  }
  
  .comment-actions {
    margin-top: 10px;
  }
  
  .comment-actions button {
    margin-right: 10px;
    padding: 6px 12px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .comment-actions button:hover {
    background-color: #007bff;
    color: white;
  }
  
  textarea {
    width: 100%;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    font-size: 16px;
    resize: none; 
    background-color: #f0f0f0;
    color: #333;
  }
  
  /* 评论输入框样式 */
  .comment-input {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 20px;
  }
  
  .comment-input input {
    width: 78%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 16px;
    transition: border-color 0.3s;
  }
  
  .comment-input input:focus {
    border-color: #007bff;
    outline: none;
  }
  
  .comment-input button {
    padding: 12px 18px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease;
  }
  
  .comment-input button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
  }
  
  .comment-input button:active {
    transform: translateY(2px);
  }
  </style>
  